<template>
  <div>
    {{msg}}

    <svg-icon icon-class="bug"></svg-icon>
    <input type="button" value="提交1" icon-class="bug" @click="openTop()">
    <input type="button" value="提交2" icon-class="bug" @click="openCenter()">
    <input type="button" value="提交3" icon-class="bug" @click="openBottom()">
    <input type="button" value="提交4" icon-class="bug" @click="openLoading()">
    <br>
    <input type="button" value="get请求" icon-class="bug" @click="getData()">
    <input type="button" value="post请求" icon-class="bug" @click="postData()">

    <p>click {{this.$store.state.score.score}} times, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
import SvgIcon from '@/components/SvgIcon';
export default {
  components:{
    SvgIcon
  },
  data(){
    return {
      msg:this.$t('user.name')
    }
  },
  computed:{
    ...mapState('score',['score']),
    ...mapGetters(['evenOrOdd']), // mapGetters() 返回值：{evenOrOdd(){return this.$store.getters.js.evenOrOdd;}}
  },
  methods:{
    ...mapActions('score',['increment','decrement','incrementIfOdd','incrementAsync']),
    // increment(){
    //   // 通知vuex更新数据去增加
    //   this.$store.dispatch('increment')
    // },
    postData(){
      this.$post('testPostObj',{
        name:'张三',
        age:18
      }).then((res)=>{
        this.msg=res.data;
      })
    },
    getData(){
      this.$get('/system/test/testGetArr',[2,3,4,5,6,7]).then((res)=>{
        this.msg=res.data;
      })
    },
    openTop(){
      this.$message.success('新增成功');
    },
    openCenter(){
      this.$message.error(this.$t('system.error'));
    },
    openBottom(){
      this.$toast( 'bottom' );  // or this.$toast.bottom('bottom');
    },
    openLoading(){
      this.$loading( 'loading...' );
      let self = this ;
      setTimeout( function () {
        self.closeLoading()
      }, 2000)
    },
    closeLoading(){
      this .$loading.close();
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>
